<template>
  <div class="charge">
    <el-table :data="allOrder">
      <el-table-column prop="date" label="产品图片">
        <template v-slot="{ row }">
          <el-avatar
            icon="el-icon-user-solid"
            :src="row.orderDetail[0].imageUrl"
            shape="square"
          ></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="order_id" label="订单编号"> </el-table-column>
      <el-table-column prop="orderDetail[0].productName" label="产品名称">
      </el-table-column>
      <el-table-column prop="orderDetail[0].quantity" label="数量">
      </el-table-column>
      <el-table-column prop="total_fee" label="总价格"> </el-table-column>
      <el-table-column prop="create_time" label="创建时间"> </el-table-column>
      <el-table-column label="支付状态">
        <template v-slot="{ row }">
          {{ row.pay_status === 1 ? "已支付" : "未支付" }}
        </template>
      </el-table-column>
      <el-table-column label="订单状态">
        <template v-slot="{ row }">
          <span v-if="row.order_status === 1" v-text="'支付成功'"></span>
          <span v-else-if="row.order_status === 2" v-text="'订单已取消'"></span>
          <span v-else-if="row.order_status === 3" v-text="'无效订单'"></span>
          <span v-else-if="row.order_status === 4" v-text="'订单已关闭'"></span>
          <span v-else v-text="'尚未支付'"></span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" class="btns">
        <template v-slot='{row}'>
          <!-- 绑定自定义指令，控制元素的状态 -->
          <el-button
            type="primary"
            :style="{ width: '105px', height: '42px' }"
            icon="iconfont icon-vip3"
            v-surePay = '[row.order_status,row.pay_status]'
          >
            去支付
          </el-button>

           <el-button
          type="primary"
          icon="el-icon-delete"
          :style="{ background: '#f56c6c', width: '80px', height: '42px' }"
          >删除</el-button
        >
        </template>
       
      </el-table-column>
    </el-table>
  </div>
</template>


<script>
import * as payApi from "@/api/pay";
export default {
  data() {
    return {
      allOrder: [],
    };
  },


  // 使用自定义指令控制元素的状态
  directives: {
    surePay:{
      inserted(el,binding){
        console.log(binding);
        let order_status = binding[0]
        let pay_status = binding[1]
        // pay_status 为 0 时表示尚未支付，还可以支付
        // order_status 为1时表示已提交订单，刚提交订单都还没开始支付呢，也可以支付
        // 除了这两种情况外的所有情况都应该禁用按钮
        if(pay_status !==0 || order_status !==1 ){
          // 禁用按钮
           el.disabled = true
          // 为按钮添加element ui 组件的禁用样式
           el.className+=' is-disabled'
        }
      }
    }
  },

  methods: {
    charging() {},
  },

  // 当组件挂载时，发送请求获取所有的订单
  async mounted() {
    let res = await payApi.allOrder();
    this.allOrder = res.data.data;
    console.log(this.allOrder);
  },

  meta: { title: "order", icon: "iconfont icon-dd" },
};
</script>

<style scoped lang='less'>

/deep/ .el-table{
  margin-top: 50px;
}
/deep/.el-table__row .cell {
  text-align: center;
}

/deep/.has-gutter tr th {
  text-align: center;
}
/deep/.has-gutter tr {
  line-height: 48px;
}
/deep/.el-table__row,
.el-table__cell {
  height: 68px !important;
  line-height: 68px;
}

/deep/.el-table__row td:last-child .cell {
  display: flex;
  justify-content: center;
}
/deep/.el-avatar {
  width: 90px;
  height: 30px;
  background: white;
}
</style>
